<template>
  <ul class="person-detail bs">
    <li class="detail">
      <div class="item store">
        <svg
          class="common"
          fill="currentColor"
          viewBox="0 0 24 24"
          width="18"
          height="18"
        >
          <path
            d="M5.515 19.64l.918-5.355-3.89-3.792c-.926-.902-.639-1.784.64-1.97L8.56 7.74l2.404-4.871c.572-1.16 1.5-1.16 2.072 0L15.44 7.74l5.377.782c1.28.186 1.566 1.068.64 1.97l-3.89 3.793.918 5.354c.219 1.274-.532 1.82-1.676 1.218L12 18.33l-4.808 2.528c-1.145.602-1.896.056-1.677-1.218z"
            fill-rule="evenodd"
          ></path>
        </svg>
        <span>我的收藏</span>
      </div>
      <span class="count">{{ collectionCount }}</span>
    </li>
    <li class="detail">
      <div class="item store">
        <svg
          class="common"
          fill="currentColor"
          viewBox="0 0 24 24"
          width="18"
          height="18"
        >
          <path
            d="M5.74 4h12.52c.961 0 1.74.775 1.74 1.73V16.27c0 .955-.779 1.73-1.74 1.73h-3.825l-1.658 2.044a1 1 0 0 1-1.554 0l-1.658-2.044H5.74C4.78 18 4 17.224 4 16.27V5.73C4 4.775 4.778 4 5.74 4zM12 16a.976.976 0 0 0 .705-.287.951.951 0 0 0 .295-.712.954.954 0 0 0-.295-.714A.976.976 0 0 0 12 14a.962.962 0 0 0-.705.295A.961.961 0 0 0 11 15c0 .284.098.522.295.713A.975.975 0 0 0 12 16zm1.278-4.924a36.81 36.81 0 0 0 1.023-.975c.19-.193.354-.422.492-.688.138-.266.207-.575.207-.928 0-.448-.12-.864-.363-1.246a2.517 2.517 0 0 0-1.029-.906C13.164 6.111 12.652 6 12.072 6c-.624 0-1.17.133-1.638.399-.468.265-.824.6-1.068 1.005-.244.405-.366.804-.366 1.2 0 .19.077.368.231.531a.747.747 0 0 0 .567.246c.38 0 .638-.234.774-.703.144-.449.32-.788.528-1.019.208-.23.532-.345.972-.345.376 0 .683.114.921.342.238.229.357.51.357.841 0 .17-.039.328-.117.473a1.782 1.782 0 0 1-.288.396c-.114.118-.3.294-.555.526a9.71 9.71 0 0 0-.696.688c-.172.194-.31.418-.414.673a2.391 2.391 0 0 0-.156.906c0 .278.071.488.213.63a.716.716 0 0 0 .525.211c.4 0 .638-.216.714-.648.044-.203.077-.345.099-.426.022-.081.053-.162.093-.243.04-.081.101-.17.183-.268.082-.098.191-.21.327-.34z"
            fill-rule="evenodd"
          ></path>
        </svg>
        <span>我关注的问题</span>
      </div>
      <span class="count">0</span>
    </li>

    <li class="detail">
      <div class="item store">
        <svg
          class="common"
          fill="currentColor"
          viewBox="0 0 24 24"
          width="18"
          height="18"
        >
          <path
            d="M4 10V8a1 1 0 1 1 2 0v2h2a1 1 0 0 1 0 2H6v2a1 1 0 0 1-2 0v-2H2a1 1 0 0 1 0-2h2zm10.455 2c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm-7 6c0-2.66 4.845-4 7.272-4C17.155 14 22 15.34 22 18v1.375c0 .345-.28.625-.625.625H8.08a.625.625 0 0 1-.625-.625V18z"
            fill-rule="evenodd"
          ></path>
        </svg>
        <span>我的邀请</span>
      </div>
      <span class="count">0</span>
    </li>
    <li class="detail">
      <div class="item store">
        <svg
          class="common"
          fill="currentColor"
          viewBox="0 0 24 24"
          width="18"
          height="18"
        >
          <path
            d="M19 19.5H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10.5a2 2 0 0 1-2 2zm0-12a.5.5 0 0 0-.5-.5h-13a.5.5 0 0 0-.5.5v2a.5.5 0 0 0 .5.5h3.75c1 0 1 2 2.75 2s1.75-2 2.75-2h3.75a.5.5 0 0 0 .5-.5v-2z"
            fill-rule="evenodd"
          ></path>
        </svg>
        <span>我的余额</span>
      </div>
    </li>
    <li class="detail">
      <div class="item store">
        <svg
          class="common"
          fill="currentColor"
          viewBox="0 0 24 24"
          width="18"
          height="18"
        >
          <path
            d="M5.74 4h12.52c.961 0 1.74.775 1.74 1.73V16.27c0 .955-.779 1.73-1.74 1.73h-3.825l-1.658 2.044a1 1 0 0 1-1.554 0l-1.658-2.044H5.74C4.78 18 4 17.224 4 16.27V5.73C4 4.775 4.778 4 5.74 4zM7 8.98c0 .554.449.996 1.003.996h4.994A.992.992 0 0 0 14 8.981a.997.997 0 0 0-1.003-.995H8.003A.992.992 0 0 0 7 8.98zm0 4c0 .554.446.996.995.996h8.01a.993.993 0 0 0 .995-.995.993.993 0 0 0-.995-.995h-8.01A.993.993 0 0 0 7 12.98z"
            fill-rule="evenodd"
          ></path>
        </svg>
        <span>站务中心</span>
      </div>
    </li>
    <li class="detail">
      <div class="item store">
        <svg width="18" height="18" viewBox="0 0 18 18" class="common">
          <path
            d="M9 1.5c2.835 0 5.152 2.195 5.247 4.949l.003.176v.253A2.25 2.25 0 0 1 15.75 9v2.25a2.25 2.25 0 0 1-1.5 2.122v.257c0 .547-.2 1.073-.557 1.482l-.102.109-1.06 1.06a.75.75 0 0 1-1.124-.99l.063-.07 1.06-1.061a.75.75 0 0 0 .213-.432l.007-.098V13.5H12a.75.75 0 0 1-.75-.75V7.5a.75.75 0 0 1 .75-.75h.75v-.125C12.75 4.628 11.076 3 9 3 6.98 3 5.34 4.541 5.254 6.464l-.004.286H6a.75.75 0 0 1 .743.648l.007.102v5.25a.75.75 0 0 1-.648.743L6 13.5H4.5a2.25 2.25 0 0 1-2.245-2.096l-.005-.154V9c0-.98.626-1.814 1.5-2.122v-.253C3.75 3.79 6.105 1.5 9 1.5z"
            fill-rule="evenodd"
          ></path>
        </svg>
        <span>帮助中心</span>
      </div>
    </li>
    <li class="detail">
      <div class="item store">
        <svg
          class="common"
          fill="currentColor"
          viewBox="0 0 24 24"
          width="18"
          height="18"
        >
          <path
            d="M16.517 15.815a5.871 5.871 0 0 1-4.481 2.078 5.865 5.865 0 0 1-5.859-5.857 5.865 5.865 0 0 1 5.859-5.859c1.63 0 3.204.7 4.319 1.919.085.093.24.432.209.797a1.086 1.086 0 0 1-.436.779c-.248.193-.516.29-.797.29-.402 0-.7-.198-.814-.314A3.473 3.473 0 0 0 12 8.575a3.464 3.464 0 0 0-3.46 3.461 3.464 3.464 0 0 0 3.46 3.46 3.63 3.63 0 0 0 2.654-1.181c.136-.152.458-.306.806-.306.274 0 .542.095.773.274.35.269.45.588.473.809.032.308-.072.585-.188.723m4.686-7.699C20.67 6.883 19.96 5.82 19.07 4.929c-.891-.89-1.954-1.601-3.188-2.133A9.728 9.728 0 0 0 12 2a9.733 9.733 0 0 0-3.883.796c-1.234.532-2.297 1.243-3.186 2.133-.891.891-1.602 1.954-2.134 3.187A9.713 9.713 0 0 0 2 12a9.752 9.752 0 0 0 .797 3.883c.531 1.233 1.242 2.296 2.134 3.186.89.891 1.953 1.602 3.186 2.134A9.725 9.725 0 0 0 12 22a9.72 9.72 0 0 0 3.883-.797c1.233-.532 2.296-1.243 3.188-2.134.89-.89 1.601-1.953 2.132-3.186A9.73 9.73 0 0 0 22 12a9.69 9.69 0 0 0-.797-3.884"
            fill-rule="evenodd"
          ></path>
        </svg>
        <span>版权服务中心</span>
      </div>
    </li>
  </ul>
</template>

<script>
import axios from '@/util/axios'
export default {
  name: "PersonDetail",
  data() {
    return {
      collectionCount: 0
    }
  },
  async created() {
    // 获取回答的数量
    const res = await axios.get('/fav/countMyFav', {params: {user_id: '6'}})
    let index = res.data;
    if (index = +index) {
      this.collectionCount = index;
    }
  }
};
</script>

<style lang="scss" scoped>
$cm_color: #8590a6;
.person-detail {
  height: 19.6rem;
  height: 29.6rem;
  padding: 1rem 0;
  background: #fff;
  margin-top: 1rem;
  .detail {
    display: flex;
    align-items: center;
    padding: 0 1rem;
    height: 4rem;
    line-height: 4rem;
    justify-content: space-between;
    cursor: pointer;
    .item {
      display: flex;
      align-items: center;
      .common {
        fill: $cm_color;
      }
      span {
        margin-left: 1rem;
        color: $cm_color;
      }
    }
    &:hover {
      background: #f6f6f6;
    }
    .count {
      height: 2.8rem;
      width: 2.8rem;
      text-align: center;
      line-height: 2.8rem;
      background: #eee;
      color: #aaa;
      &:hover {
        background: #fff;
      }
    }
  }
}
</style>